<template>
	<div class="tabBox">
		<u-tabbar :activeColor="list[0].activeColor" :inactiveColor='list[0].inactiveColor' :placeholder="true" :value="current?current:0" @change="tabbarChange"
			:safeAreaInsetBottom="true" :border="false">
			<u-tabbar-item :text="item.name" :badge='item.badge' :icon="item.activeIcon.indexOf('https')==-1?item.activeIcon:false" v-for="(item, index) in list" :key='index'>
				<image class="u-page__item__slot-icon" slot="active-icon" :src="item.activeIcon">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" :src="item.inactiveIcon">
				</image>
			</u-tabbar-item>
			<!-- <u-tabbar-item text="领券中心">
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/tabbar/tabbar_merchant_sel.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/tabbar/tabbar_merchant.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="领券中心">
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/tabbar/tabbar_merchant_sel.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/tabbar/tabbar_merchant.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="邀请好友">
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/tabbar/tabbar_message_sel.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/tabbar/tabbar_message.png">
				</image>
			</u-tabbar-item>
			<u-tabbar-item text="个人中心">
				<image class="u-page__item__slot-icon" slot="active-icon" src="@/static/tabbar/tabbar_mine_sel.png">
				</image>
				<image class="u-page__item__slot-icon" slot="inactive-icon" src="@/static/tabbar/tabbar_mine.png">
				</image>
			</u-tabbar-item> -->
		</u-tabbar>
	</div>
</template>

<script>
	export default {
		options: {
			styleIsolation: 'shared'
		},
		props: {
			current: Number,
			list: {
				type: Array,
				default: ()=>[]
			}
		},
		components: {},
		data() {
			return {
			}
		},
		created() {

		},
		methods: {
			tabbarChange(e) {
				console.log('切换', this.list[e].path.indexOf('12'))
				uni.switchTab({
					url: this.list[e].path
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.u-page__item__slot-icon {
		width: 40rpx;
		height: 40rpx;
	}

	.tabBox {

		::v-deep .u-tabbar__content__item-wrapper {
			height: 120rpx;
		}

		// 设置凸起
		// ::v-deep .u-tabbar__content__item-wrapper .u-tabbar-item:nth-child(3) .u-page__item__slot-icon {
		// 	width: 102rpx;
		// 	height: 102rpx;
		// }
	}
</style>
